<template>
  <div class="header-container">
    <div class="logo flex items-center">
      校园社团管理系统
    </div>
    <!-- <div class="this-day">2023-03-29 星期三</div>
    <div class="wether">多云/12℃-23℃/北风0级/优</div> -->
    <svg-icon icon-class="header-logo" class="icon"/>
  </div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
.header-container {
  height: 100%;
  // background-color: #004E5A;
  // background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%);
  background-color: #33C5B0;
  padding: 0 8rem;
  display: grid;
  grid-template-columns: 5fr 1fr;
  color: #fff;
  font-weight: 700;
  font-style: italic;
  font-size: 1.8rem;

  // .logo {
  //   // background-image: url('https://img1.baidu.com/it/u=2046276058,3017589940&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=375');
  //   background-size: auto 18rem;
  //   /* 背景图垂直、水平均居中 */
  //   background-position: left center;
  //   /* 背景图不平铺 */
  //   background-repeat: no-repeat;
  // }
  .logo{
    font-style: italic;
    letter-spacing: 0.5rem;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  .this-day,.wether{
    place-self: center;
  }
  .icon{
    align-self: center;
    justify-self: right;
    width: 4rem;
    height: 4rem;
  }
}
</style>
